<template>
  <a-card :bordered="false">
    <div class="table-page-search-wrapper">
      <a-form layout="inline">
        <a-row :gutter="48">
          <a-col :md="8" :sm="24">
            <a-form-item label="职位编号">
              <a-input v-model="queryParam.recruitNo" placeholder="请输入职位编号"/>
            </a-form-item>
          </a-col>
          <a-col :md="8" :sm="24">
            <a-form-item label="职位名称">
              <a-input v-model="queryParam.postTitle" placeholder="请输入职位名称"/>
            </a-form-item>
          </a-col>
          <a-col :md="8" :sm="24">
            <a-form-item label="招聘企业">
              <a-input v-model="queryParam.company" placeholder="请输入招聘企业"/>
            </a-form-item>
          </a-col>
          <a-col :md="8" :sm="24">
              <standard-form-row title="是否悬赏" block style="padding-bottom: 11px;" >
            <a-form-item>
                <tag-select  @change="bountyChange" :hideCheckAll='true' ref="bodunty">
                <tag-select-option value="1" :checked="hasBounty" >有悬赏</tag-select-option>
                <tag-select-option value="0" :checked="noBounty" >无悬赏</tag-select-option>
                </tag-select>
            </a-form-item>
            </standard-form-row>
          </a-col>
          <a-col :md="8" :sm="24">
              <standard-form-row title="职位状态"  style="padding-bottom: 11px;" >
            <a-form-item>
                <tag-select  @change="statusChange" :hideCheckAll='true' ref="reStatus">
                <tag-select-option value="1" :checked="recruDruing">招聘中</tag-select-option>
                <tag-select-option value="2" :checked="hasShelves">已下架</tag-select-option>
                </tag-select>
            </a-form-item>
            </standard-form-row>
          </a-col>
          <a-col :md="!advanced && 8 || 24" :sm="24">
            <span class="table-page-search-submitButtons" :style="advanced && { float: 'right', overflow: 'hidden' } || {} ">
              <a-button type="primary" @click="$refs.table.refresh(true)">提交</a-button>
              <a-button style="margin-left: 8px" @click="clearValue">清空</a-button>
              <!-- <a @click="toggleAdvanced" style="margin-left: 8px">
                {{ advanced ? '收起' : '展开' }}
                <a-icon :type="advanced ? 'up' : 'down'"/>
              </a> -->
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>

    <div class="table-operator">
      <a-button type="primary" icon="plus" @click="$refs.createModal.add()">新建</a-button>
    </div>

    <s-table
      ref="table"
      size="default"
      rowKey="record => record.id"
      :columns="columns"
      :data="loadData"
      showPagination="auto"
    >
     <span slot="reportNum" slot-scope="text,record">
        <template>
          <a @click="goReportList(record)">{{record.number}}</a>
        </template>
     </span>
     <span slot="status" slot-scope="text,record">
         <!-- status    1.招聘中2.已下架 -->
         <template v-if="record.status==1">
            招聘中
         </template>
          <template v-if="record.status==2">
            已下架
         </template>
      </span>
      <span slot="qrCode" slot-scope="text,record">
          <a @click="lookCode(record)" class="lookCode">查看</a>         
      </span>

      <span slot="action" slot-scope="text, record">
        <template>
          <a @click="goDestail(record)">详情</a>
          <a-divider type="vertical" />
          <a @click="shelves(record)" v-if="record.status==1">下架</a>
          <a-divider type="vertical" v-if="record.status==1"/>
          <a @click="goReportList(record)">查看报名</a>
   
         
        </template>
      </span>
    </s-table>
    <create-form ref="createModal" @ok="handleOk" />
    <step-by-step-modal ref="modal" @ok="handleOk"/>
    
  </a-card>
</template>

<script>
import moment from 'moment'
import StepByStepModal from '../../list/modules/StepByStepModal'
import CreateForm from '../add/index'
import { getRoleList, getServiceList } from '@/api/manage'
import {shelvesJob} from '@/api/job'
import { datetimes6 } from '@/utils/util';
import { Modal } from 'ant-design-vue'


import {STable, TagSelect, StandardFormRow, Ellipsis, AvatarList } from '@/components'
const TagSelectOption = TagSelect.Option
const AvatarListItem = AvatarList.AvatarItem

const statusMap = {
  0: {
    status: 'default',
    text: '关闭'
  },
  1: {
    status: 'processing',
    text: '运行中'
  },
  2: {
    status: 'success',
    text: '已上线'
  },
  3: {
    status: 'error',
    text: '异常'
  }
}

export default {
  name: 'TableList',
  components: {
    STable,
    Ellipsis,
    CreateForm,
    StepByStepModal,
    StandardFormRow,
    TagSelect,
    TagSelectOption
  },
  data () {
    return {
      form: this.$form.createForm(this),
      hasBounty:false,
      noBounty:false,
      recruDruing:false,
      hasShelves:false,
      // qrcodeUrl,
      mdl: {},
      // 高级搜索 展开/关闭
      advanced: false,
      // 查询参数
      queryParam: {
         device:5,
         version:3900,
        userId:localStorage.getItem('userId'),
        recruitNo:'',
        postTitle:'',
        company:'',
        bounty:'',
        status:'',
      },
      // 表头
      columns: [
        {
          title: '职位编号',
          dataIndex: 'recruitNo'
        },
        {
          title: '职位名称',
          dataIndex: 'postTitle'
        },
        {
          title: '招聘企业',
          dataIndex: 'company',

        },
        {
          title: '报名人数',
          dataIndex: 'number',
          sorter: false,
          needTotal: true,
          scopedSlots: { customRender: 'reportNum' }
        },
        {
          title: '悬赏',
          dataIndex: 'bounty',
        },
        {
          title: '小程序码',
          dataIndex: 'id',
          scopedSlots: { customRender: 'qrCode' }
        },
        {
          title: '状态',
          dataIndex: 'status',
          scopedSlots: { customRender: 'status' }
        },
        {
          title: '发布时间',
          dataIndex: 'createTime',
        },
        {
          title: '操作',
          dataIndex: 'action',
          width: '200px',
          scopedSlots: { customRender: 'action' }
        }
      ],

      // 加载数据方法 必须为 Promise 对象
      loadData: parameter => {
        console.log('loadData.parameter', parameter)
        return getServiceList(Object.assign(parameter, this.queryParam))
          .then(res => {
            console.info('表格请求回来的数据',res.result);
            let result=res.result;
            result.data.forEach((v,i) => {
               result.data[i].createTime=datetimes6(v.createTime)
               result.data[i].bounty=v.bounty+"元"
               // status 1.招聘中2.已下架
             


            });
            return result
          })
      },
      selectedRowKeys: [],
      selectedRows: [],

      // custom table alert & rowSelection
      options: {
        alert: { show: true, clear: () => { this.selectedRowKeys = [] } },
        rowSelection: {
          selectedRowKeys: this.selectedRowKeys,
          onChange: this.onSelectChange
        }
      },
      optionAlertShow: false
    }
  },
  filters: {
    statusFilter (type) {
      return statusMap[type].text
    },
    statusTypeFilter (type) {
      return statusMap[type].status
    }
  },
  created () {
    this.tableOption()
    getRoleList({ t: new Date() })
  },
  methods: {
    tableOption () {
      if (!this.optionAlertShow) {
        this.options = {
          alert: { show: true, clear: () => { this.selectedRowKeys = [] } },
          rowSelection: {
            selectedRowKeys: this.selectedRowKeys,
            onChange: this.onSelectChange,
            getCheckboxProps: record => ({
              props: {
                disabled: record.no === 'No 2', // Column configuration not to be checked
                name: record.no
              }
            })
          }
        }
        this.optionAlertShow = true
      } else {
        this.options = {
          alert: false,
          rowSelection: null
        }
        this.optionAlertShow = false
      }
    },
    //查看二维码
    lookCode(record){
      const that=this;
      const h = this.$createElement
      let id=record.cdId;
      let imgUrl='https://xsxz-dev.shouhuobao.com/rank/codeLimit?device=5&version=3900&dynamicId='+id+'&page=pages/login/login&qrCodeType=shareDetail&topicId=2'
      this.$info({
        title: '使用微信扫描二维码浏览',
    content: h('div',{}, [
          h('img', {attrs:{
            class:'imgQRcode',
            src: imgUrl
          }}),
        ]),
        onOk() {},
      });
    },
    //下架职位
    shelves(record){
      const that=this;
        this.$confirm({
        title: '是否下架该职位，下架后用户讲无法看到该职位！',
        content: '',
        okText: '确定',
        okType: 'danger',
        cancelText: '取消',
        onOk() {
          console.log('OK');

          shelvesJob({device:5, version:3900,id:record.id,status:2 })
          .then(res => {
            console.info(res);
            if(res.code==1){
               that.$refs.table.refresh()
            }
          })
          .catch((err) => {
            console.info(err)
          })

        },
        onCancel() {
          console.log('Cancel');
        },
      });

    },
    //查看报名列表
    goReportList(record){
      this.$router.push({path:'/report/list/' + record.cdId});
    },

// 跳转详情
    goDestail(record) {
      this.$router.push({path:'/job/Details/' + record.cdId});
    },
    //清楚表单数据
    clearValue(){
      
       this.hasBounty=false
       this.noBounty=false
       this.hasShelves=false
       this.recruDruing=false
       this.$refs.bodunty.onCheckAll({checked:false})
       this.$refs.reStatus.onCheckAll({checked:false})

       this.queryParam.recruitNo = '';
       this.queryParam.postTitle = '';
       this.queryParam.company = '';
       this.queryParam.bounty = '';
       this.queryParam.status = '';
    },
    handleEdit (record) {
      console.log(record)
      this.$refs.modal.edit(record)
    },
    handleSub (record) {
      if (record.status !== 0) {
        this.$message.info(`${record.no} 订阅成功`)
      } else {
        this.$message.error(`${record.no} 订阅失败，规则已关闭`)
      }
    },
    handleOk () {
      this.$refs.table.refresh()
    },
    onSelectChange (selectedRowKeys, selectedRows) {
      this.selectedRowKeys = selectedRowKeys
      this.selectedRows = selectedRows
    },
    toggleAdvanced () {
      this.advanced = !this.advanced
    },
    // 悬赏金额
    bountyChange(e){
      const that=this;
      if(e.value==1) {
        this.hasBounty = e.checked;
      }
      if(e.value==0) {
        this.noBounty = e.checked;
      }

      if(this.hasBounty && this.noBounty) {
        that.queryParam.bounty="";
      } else {
        that.queryParam.bounty=this.hasBounty ?1: this.noBounty?0:"";
      }
    },
    // 状态改变
    statusChange(e){
      const that=this;
      if(e.value==1) {
        this.recruDruing = e.checked;
      }
      if(e.value==2) {
        this.hasShelves = e.checked;
      }

      if(this.recruDruing && this.hasShelves) {
        that.queryParam.status="";
      } else {
        that.queryParam.status=this.recruDruing ?1: this.hasShelves?2:"";
      }
    },
    resetSearchForm () {
      this.queryParam = {
        date: moment(new Date())
      }
    }
  }
}
</script>
<style lang="less" scoped>

.ant-pro-components-tag-select {
  /deep/ .ant-pro-tag-select .ant-tag {
    margin-right: 24px;
    padding: 0 8px;
    font-size: 14px;
  }
}
.ant-pro-pages-list-projects-cardList {
  margin-top: 24px;

  /deep/ .ant-card-meta-title {
    margin-bottom: 4px;
  }

  /deep/ .ant-card-meta-description {
    height: 44px;
    overflow: hidden;
    line-height: 22px;
  }

  .cardItemContent {
    display: flex;
    height: 20px;
    margin-top: 16px;
    margin-bottom: -4px;
    line-height: 20px;

    > span {
      flex: 1 1;
      color: rgba(0,0,0,.45);
      font-size: 12px;
    }

    /deep/ .ant-pro-avatar-list {
      flex: 0 1 auto;
    }
  }

}
  .lookCode{
    text-decoration: underline!important;
  }
  .imgQRcode{
     width: 170px;
    height: 170px;
    margin-top: 20px;
  }
</style>
